<template>

	<!-- 底部导航 -->
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(index,item)">
			<view class="chat-num" v-if="index == 3">
				<u-badge max="99" v-if="Number(imNum)" :value="imNum" bgColor="#FF5E45"></u-badge>
			</view>
			<image class="item-img" :src="item.iconPath" v-if="activeIdx == index"></image>
			<image class="item-img1" :src="item.icon" v-else></image>
			<!-- <view class="itemtxt" :class="{ 'tabbarActive':urlPath == item.path}">
				{{item.text}}
			</view> -->
			<view class="itemtxt" :class="{ 'tabbarActive':activeIdx == index}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props:{
			activeIdx: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				urlPath: "/pages/index/index", 
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [{
						text: '首页', //首页
						icon: '../../static/images/ta.png', //未选中图标
						iconPath: '../../static/images/taa.png', //选中图片
						path: "/pages/index/index", //页面路径
					},
					{
						text: '发现', //发现
						icon: '../../static/images/tb.png', //未选中图标
						iconPath: '../../static/images/tba.png', //选中图片
						path: "/pages/find/find",
					},
					{
						text: '',
						icon: '../../static/images/fa.png', //未选中图标
						iconPath: '../../static/images/fa.png', //选中图片
						path: "/pages/resease/resease",
					},
					{
						text: '消息', //消息
						icon: '../../static/images/tc.png', //未选中图标
						iconPath: '../../static/images/tca.png', //选中图片
						path: '/TUIKit/components/TUIConversation/index',
					},
					{
						text: '我的', //我的
						icon: '../../static/images/td.png', //未选中图标
						iconPath: '../../static/images/tda.png', //选中图片
						path: "/pages/user/user",
					}
				],
				// imNum:0
				is_dong: ''
			};
		},
		
		created() {
			if(this.$db.get('userInfo') != null){
				 this.$common.loginIm(this.$db.get('userInfo'))
			}
			// this.$common.loginIm(this.$db.get('userInfo'))
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

			// this.getImNum() 
			this.getAccountState()
		},
		onLoad() {
			
		},
		computed: {
			...mapState({
				imNum: state => state.imNum,
			})
		},
		watch: {
			// imNum(val) {
			// 	this.imNum = val
			// }
		},
		methods: {
			getImNum(){
				
				// if (this.$store.state.isSDKReady) {
				// 	this.imNum = this.tim.getTotalUnreadMessageCount()
				// 	console.log('消息数：',this.imNum)
				// }else{
				// 	setTimeout(()=>{
				// 		this.getImNum()
				// 	},1000)
				// }
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 0,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			tabbarChange(index,item) {
				if(item.path != "/pages/resease/resease"){
					//记录？
					uni.setStorageSync("end_path",item.path);
					
				}
				
				if(item.path == "/pages/resease/resease" && this.is_dong == 1){
					this.$common.errorToShow('您的动态发布权限已被暂时关停')
					return
				}
				
				if(this.activeIdx != index){
						uni.redirectTo({
							url: item.path
						})
				}
			
				
				
				// if(this.urlPath != path){
				
				// 	uni.redirectTo({
				// 		url: path
				// 	})
				// }
			}
		}
	};
</script>

<style scoped>
	.tabbarActive {
		color: #3d3d3d !important;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 102rpx;
		background-color: #ffffff;
		z-index: 99;
		box-shadow: 0 0 3px #eeeeee;
	}

	.tabbar-item {
		text-align: center;
		width: 20%;
	}

	/* 选中后 */
	.item-img {
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
	}

	/* 选中前 */
	.item-img1 {
		width: 50rpx;
		margin: 0 auto;
		height: 50rpx;
	}

	.itemtxt {
		font-size: 24rpx;
		color: #999999;
		margin-top: -10rpx;
	}

	.chat-num {
		position: absolute;
		left: 530rpx;
		top: 0;
		z-index: 99;
	}
</style>